<template>
  <div class="app-platform-container">
    <div class="platform-content-wrapper">
      <!-- Search Form -->
      <div class="search-card" v-if="false">
        <el-form :inline="true" :model="searchForm" class="search-form" label-position="left">
          <el-form-item label="">
            <el-input v-model="searchForm.appName" placeholder="请输入应用名称"></el-input>
          </el-form-item>

          <el-form-item label="">
            <el-input v-model="searchForm.appId" placeholder="请输入AppID"></el-input>
          </el-form-item>

          <el-form-item label="">
            <el-select v-model="searchForm.status" placeholder="请选择">
              <el-option
                  v-for="item in statusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="resetSearch">重置</el-button>
          </el-form-item>

          <el-form-item class="create-btn">
            <el-button type="success" @click="createApp">创建应用</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- App List -->
      <div class="app-list">
        <el-row :gutter="20">
          <el-col :span="6" v-for="(app, index) in paginatedApps" :key="index" class="app-col">
            <div class="app-card">
              <div class="app-content">
                <div class="app-icon">
                  <img :src="app.icon" alt="app-icon" class="svg-icon">
                </div>
                <div class="app-info">
                  <h3 class="app-title">{{ app.name }}</h3>
                  <p class="app-subtitle">{{ app.subtitle }}</p>
                </div>
                <div class="app-status" :class="'status-' + app.status">
                  {{ app.statusText }}
                </div>
              </div>
              <div class="app-footer">
                <el-link type="primary" @click="viewApp(app.id)">查看</el-link>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 分页组件 -->
      <div class="pagination-container">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[12, 24, 36, 48]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalApps">
        </el-pagination>
      </div>
    </div>
    <contact-footer></contact-footer>
  </div>
</template>

<script>
import ContactFooter from "@/view/homeComponents/banner.vue";

export default {
  name: 'AppPlatform',
  components: {ContactFooter},
  data() {
    return {
      searchForm: {
        appName: '',
        appId: '',
        status: ''
      },
      statusOptions: [
        { value: '1', label: '全部状态' },
        { value: '2', label: '已上线' },
        { value: '3', label: '开发中' },
        { value: '4', label: '已下线' }
      ],
      appList: [
        {
          id: 1,
          name: '供应链协同系统',
          subtitle: 'SCM System\n2023-10-10',
          icon: require('@/assets/app-center/gylxt.svg'), // 直接引用SVG文件
          status: 'online',
          statusText: '已上线'
        },
        {
          id: 2,
          name: '生产管理系统',
          subtitle: 'MES System\n2023-09-15',
          icon: require('@/assets/app-center/sbgl.svg'),
          status: 'online',
          statusText: '已上线'
        },
        {
          id: 3,
          name: '设备管理平台',
          subtitle: 'IOT Platform\n2023-08-20',
          icon: require('@/assets/app-center/jngl.svg'),
          status: 'developing',
          statusText: '开发中'
        },
        {
          id: 4,
          name: '质量追溯系统',
          subtitle: 'QMS System\n2023-07-05',
          icon: require('@/assets/app-center/shgl.svg'),
          status: 'offline',
          statusText: '已下线'
        },
        {
          id: 1,
          name: '供应链协同系统',
          subtitle: 'SCM System\n2023-10-10',
          icon: require('@/assets/app-center/gylxt.svg'), // 直接引用SVG文件
          status: 'online',
          statusText: '已上线'
        },
        {
          id: 2,
          name: '生产管理系统',
          subtitle: 'MES System\n2023-09-15',
          icon: require('@/assets/app-center/sbgl.svg'),
          status: 'online',
          statusText: '已上线'
        },
        {
          id: 3,
          name: '设备管理平台',
          subtitle: 'IOT Platform\n2023-08-20',
          icon: require('@/assets/app-center/jngl.svg'),
          status: 'developing',
          statusText: '开发中'
        },
        {
          id: 4,
          name: '质量追溯系统',
          subtitle: 'QMS System\n2023-07-05',
          icon: require('@/assets/app-center/shgl.svg'),
          status: 'offline',
          statusText: '已下线'
        },
        {
          id: 1,
          name: '供应链协同系统',
          subtitle: 'SCM System\n2023-10-10',
          icon: require('@/assets/app-center/gylxt.svg'), // 直接引用SVG文件
          status: 'online',
          statusText: '已上线'
        },
        {
          id: 2,
          name: '生产管理系统',
          subtitle: 'MES System\n2023-09-15',
          icon: require('@/assets/app-center/sbgl.svg'),
          status: 'online',
          statusText: '已上线'
        },
        {
          id: 3,
          name: '设备管理平台',
          subtitle: 'IOT Platform\n2023-08-20',
          icon: require('@/assets/app-center/jngl.svg'),
          status: 'developing',
          statusText: '开发中'
        },
        {
          id: 4,
          name: '质量追溯系统',
          subtitle: 'QMS System\n2023-07-05',
          icon: require('@/assets/app-center/shgl.svg'),
          status: 'offline',
          statusText: '已下线'
        },
        {
          id: 1,
          name: '供应链协同系统',
          subtitle: 'SCM System\n2023-10-10',
          icon: require('@/assets/app-center/gylxt.svg'), // 直接引用SVG文件
          status: 'online',
          statusText: '已上线'
        },
        {
          id: 2,
          name: '生产管理系统',
          subtitle: 'MES System\n2023-09-15',
          icon: require('@/assets/app-center/sbgl.svg'),
          status: 'online',
          statusText: '已上线'
        },
        {
          id: 3,
          name: '设备管理平台',
          subtitle: 'IOT Platform\n2023-08-20',
          icon: require('@/assets/app-center/jngl.svg'),
          status: 'developing',
          statusText: '开发中'
        },
        {
          id: 4,
          name: '质量追溯系统',
          subtitle: 'QMS System\n2023-07-05',
          icon: require('@/assets/app-center/shgl.svg'),
          status: 'offline',
          statusText: '已下线'
        }
      ],
      currentPage: 2,  // 当前页码
      pageSize: 12      // 每页显示数量
    }
  },
  computed: {
    // 计算总应用数
    totalApps() {
      return this.appList.length
    },
    // 计算当前页显示的应用
    paginatedApps() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return this.appList.slice(start, end)
    }
  },
  methods: {
    handleSearch() {
      console.log('Search:', this.searchForm)
      // 这里应该调用API获取数据，然后重置分页
      this.currentPage = 1
    },
    resetSearch() {
      this.searchForm = {
        appName: '',
        appId: '',
        status: ''
      }
      this.currentPage = 1
    },
    createApp() {
      console.log('Create new app')
    },
    viewApp(id) {
      console.log('View app:', id)
      window.open('https://cloud.yamdyun.com/#/dashboard', '_blank')
    },
    // 每页条数变化
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
    },
    // 当前页变化
    handleCurrentChange(val) {
      this.currentPage = val
    }
  }
}
</script>

<style scoped>
.app-platform-container {
  width: 100%;
  padding: 20px 0;
  background-color: #ffffff;
}

.platform-content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.search-card {
  margin-bottom: 20px;
  padding: 20px;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
}

.search-form .el-form-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-right: 20px;
  margin-bottom: 15px;
}

.search-form .el-form-item__label {
  text-align: left;
  float: none;
  padding: 0 0 8px 0;
  font-weight: normal;
}

.create-btn {
  margin-left: auto;
}

.app-list {
  margin-top: 20px;
  padding: 20px;
}

.app-col {
  margin-bottom: 20px;
}

.app-card {
  position: relative;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.3s;
}



.app-content {
  display: flex;
  padding: 20px;
  text-align: left;
  flex: 1;
}

.app-icon {
  width: 60px;
  height: 60px;
  margin-right: 15px;
  background: #f5f5f5;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.svg-icon {
  width: 40px;
  height: 40px;
}

.app-info {
  flex: 1;
  text-align: left;
}

.app-title {
  font-size: 16px;
  margin: 0 0 5px 0;
  color: #333;
  text-align: left;
}

.app-subtitle {
  font-size: 12px;
  color: #999;
  margin: 0;
  white-space: pre-line;
  text-align: left;
}

.app-status {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  z-index: 1;
}

.status-online {
  background: #f0f9eb;
  color: #67c23a;
}

.status-developing {
  background: #f4f4f5;
  color: #909399;
}

.status-offline {
  background: #fef0f0;
  color: #f56c6c;
}

.app-footer {
  height: 40px;
  line-height: 40px;
  background: #f5f5f5;
  padding: 0 20px;
  text-align: right;
  border-top: 1px solid #e6e6e6;
}

.pagination-container {
  text-align: right;
  margin-top: 20px;
  padding: 20px 0;
}
</style>